<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord" />&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "Search",
  data() {
    return {
        keyWord:''
    }
  },
  methods: {
    searchUsers(){
        // axios.get('https://api.github.com/search/users?q=this.keyWord')  这么写是不可以的，因为this会变成字符串而不起作用，所以可以使用模板字符串
        this.$bus.$emit('updateList',{isFirst:false,isLoading:true,errorMsg:'',users:[]})//点击时
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
            response=>{
                this.$bus.$emit('updateList',{isFirst:false,isLoading:false,errorMsg:'',users:response.data.items})//点击时，是否手册状态变为false，是否加载还不用
            },
            error=>{
                // this.$bus.$emit('updateList',false,false,'请求失败',[])
                this.$bus.$emit('updateList',{isLoading:false,errorMsg:'信息获取失败！',users:[]})
                // console.log('请求失败！',response.data);
            }
        )  
    }
  },
};
</script>

<style>
</style>